<template>
  <div>
    <h1>订单列表</h1>
    <div class="a">
      <el-input class="b" v-model="pagination.con" placeholder="按内容搜索订单"></el-input>
      <svg class="search" aria-hidden="true" @click="getAll()" >
        <use xlink:href="#icon-sousuo"></use>
      </svg>
    </div>
    <div class="z">
      <el-table :data="orders" stripe style="width: 100%">
        <el-table-column prop="oid" label="订单ID" width="100" />
        <el-table-column prop="uid" label="用户ID" width="100" />
        <el-table-column prop="wid" label="跑腿员ID" width="100" />
        <el-table-column prop="content" label="订单内容" width="200" />
        <el-table-column prop="money" label="订单金额" width="100" />
        <el-table-column prop="time" label="订单时间" width="200" />
        <el-table-column prop="state" label="订单状态" width="120" >
          <template v-slot="scope">
                  <span v-if="scope.row.state == 1">未接单</span>
                  <span v-if="scope.row.state == 2">进行中</span>
                  <span v-if="scope.row.state == 3">待评价</span>
                  <span v-if="scope.row.state == 4">已完成</span>
            </template>
          </el-table-column>
        <el-table-column prop="type" label="订单类型" width="120" >
          <template v-slot="ascope">
                  <span v-if="ascope.row.type == 1">代买</span>
                  <span v-if="ascope.row.type == 2">代取</span>
                  <span v-if="ascope.row.type == 3">代送</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="primary"  @click="handleUpdate(scope.row)">详情</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>

    
    <el-dialog v-model="dialogFormVisible4Edit" title="订单详情" width="45%" align-center>
      <el-form :model="formData" label-width="120px">
      <el-form-item label="订单ID：">
          {{formData.oid}}
      </el-form-item>
      <el-form-item label="内容：">
        {{formData.content}}
      </el-form-item>
      <el-form-item label="金额：">
        {{formData.money}}
      </el-form-item>
      <el-form-item label="时间：">
        {{formData.time}}
      </el-form-item>
      <el-form-item label="状态：">
        <span v-if="formData.state == 1">未接单</span>
        <span v-if="formData.state == 2">进行中</span>
        <span v-if="formData.state == 3">待评价</span>
        <span v-if="formData.state == 4">已完成</span>
      </el-form-item>
      <el-form-item label="类型：">
        <span v-if="formData.type == 1">代买订单</span>
        <span v-if="formData.type == 2">代取订单</span>
        <span v-if="formData.type == 3">代送订单</span>
      </el-form-item>
      <el-form-item label="评价：">
        <span v-if="formData.conment">{{formData.conment}}</span>
        <span v-else>暂无评价</span>
      </el-form-item>
      </el-form>
      <el-form-item>
        <el-button  type="primary" @click="dialogFormVisible4Edit = false">确定</el-button>
      </el-form-item>
    </el-dialog>

    
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      layout="total,prev,pager,next,jumper"
      :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { getApi,postApi,deleteApi,updateApi} from '@/util/api'

</script>

<script>
  export default {
      data() {
        
          return {
              orders: {},//列表显示
              dialogFormVisible4Edit:false,//编辑表单是否可见
              formData:{},//表单数据
              pagination:{//分页
              currentPage:1,//当前页码
              pageSize:7,//一页多少条
              total:0,
              con:"",
            }  
        ,
          }
      },
      created(){
        this.getAll();
      }
      ,
      methods:{
        //分页
        getAll(){
          getApi("admin/orders/"+this.pagination.currentPage+"/"+this.pagination.pageSize+"?con="+this.pagination.con).then((rs)=>{
              this.pagination.pageSize = rs.data.data.size;
              this.pagination.currentPage = rs.data.data.current;
              this.pagination.total = rs.data.data.total;
              this.orders=rs.data.data.records;
              }).catch(error=>{
 
                  alert(error);
              })
        },
        handleCurrentChange(currentPage){
          //修改页码值为当前选中页码值
          this.pagination.currentPage = currentPage;
          //执行查询
          this.getAll();
        },
        //删除
        handleDelete(row){
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info',
          confirmButtonText:"确定",
          cancelButtonText:"取消"
        }).then(()=>{
          deleteApi("admin/orders/"+row.oid).then((res)=>{
        if(res.data.flag){
            
          this.$message.error("数据同步失败，自动刷新");
        }else{
          this.$message.success("删除成功");
        }
        }).finally(()=>{
          this.getAll();
        });
        }).catch(()=>{
          this.$message.info("取消删除操作");
        });},

         //详情
         handleUpdate(row){
          getApi("admin/orders/"+row.oid).then((res)=>{
            if(res.data.code == 1){
              this.formData = res.data.data;
              this.dialogFormVisible4Edit = true;
            }else{
              this.$message.error("数据同步失败，自动刷新");
            }
          }).finally(()=>{
            this.getAll();
        });
        },

      }

      ,
      mounted() {
          
      },
  }
</script>


<style lang="scss" scoped>
.pagination-container{
  position: absolute;
  right: 70px;
  margin-top: 40px;
}
.a{
  margin-top: 20px;
  margin-left: 400px;
  position: relative;
  .b{
    font-size: 24px;
    width: 300px;
  }
  .search{
    position: absolute;
    margin-top: 1px;
    margin-left: 5px;
    width: 2em;
    height: 2em;
  }
}

.z{
  margin-top: 30px;
}
</style>